<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="提现"> </mh-header>
      <div class="account">
        <router-link class="mui-navigate-right" :to="{path: '/profile/withdrawAccount'}">
          <span>提现账号</span>
          <span v-if='withdrawType==1' class="mui-pull-right account-type">支付宝</span>
          <span v-if='withdrawType==2' class="mui-pull-right account-type">微信</span>
          <span v-if='!withdrawType' class="mui-pull-right account-type">请选择</span>
        </router-link>
      </div>
      <div class="with-amount">
        <label>提现金额</label>
        <div class="input-row flex">
          <span>￥</span>
          <input type="text" class="input-amount" v-model="withAmount">
        </div>
      </div>
      <div class="flex-bt mh-pd bg-w">
        <span class="can-with">可提现金额：<span>{{count}}</span></span>
        <span class="with-tip">提现金额为500的倍数</span>
      </div>
      <p class="msg-tip bg-w">提现需进行短信验证</p>
      <p class="phone bg-w">{{phone}}</p>
      <div class="phone-row flex-bt bg-w">
        <input type="text" placeholder="请输入验证码" v-model='code'>
        <button v-if='codeFlag' type="button" class="mh-btn send-btn" @tap='getCode'>获取验证码</button>
        <span v-else class="mh-btn send-btn btn-cur">重新获取{{time}}s</span>
      </div>
      <div class="with-amount">
        <label>提现备注</label>
        <div class="input-row flex">
          <input type="text" class="remarks" v-model="remarks" placeholder="请输入提现备注">
        </div>
      </div>
      <div class="btn-row bg-w mh-pd">
        <button v-if='dayFlag' type="button" class="mui-btn-block btn-with" @tap='submit'>立即提现</button>
        <button v-else type="button" class="mui-btn-block btn-dis">今日不可提现，提现日期为每月{{thisDay}}号</button>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "withdraw",
    data () {
      return {
        withAmount: 500.00,
        count: 0,
        phone: '',
        time: 60,
        codeFlag: true,
        dayFlag: false,
        withdrawType: null,
        thisDay: 10,
        remarks: '',
        code: ''
      }
    },
    components: {
      MhHeader
    },
    methods: {
      getCode(){
        let self = this;
        MH_API.sendCode({
          phone: self.phone
        }).then(res => {
          //if (res.code === 200) {
            self.codeFlag = false;
            mui.toast("发送成功");
            let time = self.time;
            let timer = setInterval(function(){
              --time;
              if(time==0){
                time = 60;
                clearInterval(timer);
                self.codeFlag = true;
              }
              self.time = time;
            }, 1000)
          //}
        })
      },
      submit(){
        let self = this;
        if(self.withAmount > self.count){
          mui.toast("可提现金额不足");
          return false
        }
        if(!self.withdrawType){
          mui.toast("请选择提现账户");
          return false
        }
        MH_API.applyCash({
          type: self.withdrawType,
          money: self.withAmount,
          remarks: self.remarks,
          phone: self.phone,
          code: self.code
        }).then(res => {
          if (res.status == 200) {
            mui.toast("申请成功，等待审核");
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg);
          }
        })
      }
    },
    created(){
      let phone = window.localStorage.getItem("phone");
      this.phone = phone;

      let self = this;
      //可提现金额
      MH_API.getUserCash({
        
      }).then(res => {
        if (res.status == 200) {
          self.count = res.data.gold;
          self.thisDay = res.data.tixian;
        }
      })

      //day
      let now = new Date();
      let day = now.getDate();
      if(day==25){
        this.dayFlag = true
      }

      let withdrawType = window.localStorage.getItem("withdrawType");
      this.withdrawType = withdrawType;
      console.log(withdrawType)

    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .account {
    position: relative;
    padding: 1.5rem 1rem;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .account-type {margin-right: 25px;}
  }
  .with-amount {
    padding: 1rem 0 1rem 1rem;
    background-color: #fff;
    label {@include sc(1.4rem, #666); }
  }
  .input-row {
    margin-top: 1rem;
    border-bottom: 1px solid #eee;
    span {@include sc(1.8rem, #666);}
    input {
      margin: 0 1rem;
      @include sc(3rem, #333);
      border: 0;
    }
    .remarks{ font-size:1.6rem; margin:0;}
  }
  .can-with {@include sc(1.2rem, #666);}
  .with-tip { @include sc(1.2rem, #e43a3a);}
  .msg-tip {
    @include sc(1.2rem, #666);
    &:before {
      margin: 0 .4rem 0 1rem;
      content: '*';
      @include sc(1.2rem, #e685aa);
    }
  }
  .phone-row {
    padding: 0 1rem;
    border-bottom: 1px solid #eee;
    input {
      margin: 0 .5rem 0 0;
      padding-left: 0;
      font-size: 1.6rem;
      border: 0; width:25rem;
    }
  }
  .phone {
    padding: 1rem;
    font-weight: bold;
    @include sc(1.4rem, #333);
  }
  .send-btn {
    padding: .6rem 0.8rem;
    font-size: 1.4rem;
  }
  .btn-row {padding-top: 3rem;}
  .btn-with {
    background-color: #f26c60;
    color: #fff;
  }
  .btn-dis {
    background-color: #ddd;
    color: #333;
  }
  .btn-cur{ background-color:#ccc;}

</style>
